---
title: StraightEdgeRenderer 直边渲染器
icon: Ruler
relatedFile: app/src/core/render/canvas2d/entityRenderer/edge/concrete/StraightEdgeRenderer.tsx
---

用于渲染直线边缘，包括普通状态、拖动状态和自环状态下的边缘。它负责计算边缘的视觉表现，并将其绘制到画布上或生成 SVG 元素。

## 效果生成

### `getCuttingEffects(edge: LineEdge): Effect[]`

基于给定的直线边缘，生成并返回用于“切割”效果的特效数组。

### `getConnectedEffects(startNode: ConnectableEntity, toNode: ConnectableEntity): Effect[]`

基于连接的起始节点和目标节点，生成并返回用于连接效果的特效数组。这些效果包括：
-   以起始节点中心为起点的圆形火焰效果。
-   从起始节点中心到目标节点中心的线条切割效果。

## 渲染方法 (Canvas 2D)

### `renderNormalState(edge: LineEdge): void`

在普通状态下渲染直线边缘。
-   根据边缘的颜色和宽度进行绘制。
-   如果边缘有文本，则在边缘中间渲染文本，并调整线条以避开文本区域。
-   如果目标不是连接点，则在边缘末端绘制箭头。

### `renderShiftingState(edge: LineEdge): void`

在拖动状态下渲染直线边缘。
-   计算从源节点到拖动中点，再到目标节点的线条路径。
-   根据边缘是否有文本，渲染线条和文本。
-   在边缘末端绘制箭头。

### `renderCycleState(edge: LineEdge): void`

在自环状态下渲染边缘。
-   绘制一个以目标节点为中心的弧线，模拟自环。
-   绘制箭头。
-   如果边缘有文本，则在自环上方渲染文本。

### `renderVirtualEdge(startNode: ConnectableEntity, mouseLocation: Vector): void`

渲染一个虚拟边缘，用于表示从起始节点到鼠标当前位置的潜在连接。
-   绘制一条从起始节点中心到鼠标位置的渐变线条。

### `renderVirtualConfirmedEdge(startNode: ConnectableEntity, endNode: ConnectableEntity): void`

渲染一个已确认的虚拟边缘，用于表示从起始节点到目标节点的潜在连接。
-   绘制一条从起始节点中心到目标节点中心的渐变线条。

## SVG 生成方法

### `getNormalStageSvg(edge: LineEdge): React.ReactNode`

生成普通状态下直线边缘的 SVG 元素。
-   如果边缘没有文本，则生成一条直线。
-   如果边缘有文本，则生成文本节点，并生成两条避开文本的直线。
-   生成并包含箭头 SVG。

### `getCycleStageSvg(): React.ReactNode`

生成自环状态下边缘的 SVG 元素。当前实现返回一个空的 React 节点。

### `getShiftingStageSvg(): React.ReactNode`

生成拖动状态下边缘的 SVG 元素。当前实现返回一个空的 React 节点。

## 辅助渲染方法

### `renderArrowHead(edge: LineEdge, direction: Vector, endPoint = edge.bodyLine.end.clone(), size = 15): void`

渲染边缘的箭头。
-   根据边缘颜色、方向、终点和大小绘制箭头。
